import {
	Modal,
	Form,
	Input,
	Icon,
	Tooltip,
	Select,
	message,
	Button,
	Row,
	Col
} from "ant-design-vue";
import {
	updateProject,
	fetchProjectList,
	delProject,
	changeUpdateModal,
	changeTableLoading
} from "../../../reducer/modules/project";
const { TextArea } = Input;
const FormItem = Form.Item;
const Option = Select.Option;

import "./ProjectList.scss";

// layout
const formItemLayout = {
	labelCol: {
		xs: { span: 24 },
		sm: { span: 6 }
	},
	wrapperCol: {
		xs: { span: 24 },
		sm: { span: 14 }
	}
};
const formItemLayoutWithOutLabel = {
	wrapperCol: {
		xs: { span: 24, offset: 0 },
		sm: { span: 20, offset: 6 }
	}
};
let uuid = 0;

@connect(
	state => {
		return {
			projectList: state.project.projectList,
			isUpdateModalShow: state.project.isUpdateModalShow,
			handleUpdateIndex: state.project.handleUpdateIndex,
			tableLoading: state.project.tableLoading,
			currGroup: state.group.currGroup
		};
	},
	{
		fetchProjectList,
		updateProject,
		delProject,
		changeUpdateModal,
		changeTableLoading
	}
)
class UpDateModal extends Component {
	constructor(props) {
		super(props);
		this.state = {
			protocol: "http://",
			envProtocolChange: "http://"
		};
	}
	static propTypes = {
		form: PropTypes.object,
		fetchProjectList: PropTypes.func,
		updateProject: PropTypes.func,
		delProject: PropTypes.func,
		changeUpdateModal: PropTypes.func,
		changeTableLoading: PropTypes.func,
		projectList: PropTypes.array,
		currGroup: PropTypes.object,
		isUpdateModalShow: PropTypes.bool,
		handleUpdateIndex: PropTypes.number
	};

	// 修改线上域名的协议类型 (http/https)
	protocolChange = value => {
		this.setState({
			protocol: value
		});
	};

	handleCancel = () => {
		this.props.form.resetFields();
		this.props.changeUpdateModal(false, -1);
	};

	// 确认修改
	handleOk = e => {
		e.preventDefault();
		const {
			form,
			updateProject,
			changeUpdateModal,
			currGroup,
			projectList,
			handleUpdateIndex,
			fetchProjectList,
			changeTableLoading
		} = this.props;
		form.validateFields((err, values) => {
			if (!err) {
				// console.log(projectList[handleUpdateIndex]);
				let assignValue = Object.assign(projectList[handleUpdateIndex], values);
				values.protocol = this.state.protocol.split(":")[0];
				assignValue.env = assignValue.envs.map((item, index) => {
					return {
						name: values["envs-name-" + index],
						domain:
							values["envs-protocol-" + index] + values["envs-domain-" + index]
					};
				});
				// console.log(assignValue);

				changeTableLoading(true);
				updateProject(assignValue)
					.then(res => {
						if (res.payload.data.errcode == 0) {
							changeUpdateModal(false, -1);
							message.success("修改成功! ");
							fetchProjectList(currGroup._id).then(() => {
								changeTableLoading(false);
							});
						} else {
							changeTableLoading(false);
							message.error(res.payload.data.errmsg);
						}
					})
					.catch(() => {
						changeTableLoading(false);
					});
				form.resetFields();
			}
		});
	};

	// 项目的修改操作 - 删除一项环境配置
	remove = id => {
		const { form } = this.props;
		// can use data-binding to get
		const envs = form.getFieldValue("envs");
		// We need at least one passenger
		if (envs.length === 0) {
			return;
		}

		// can use data-binding to set
		form.setFieldsValue({
			envs: envs.filter(key => {
				const realKey = key._id ? key._id : key;
				return realKey !== id;
			})
		});
	};

	// 项目的修改操作 - 添加一项环境配置
	add = () => {
		uuid++;
		const { form } = this.props;
		// can use data-binding to get
		const envs = form.getFieldValue("envs");
		const nextKeys = envs.concat(uuid);
		// can use data-binding to set
		// important! notify form to detect changes
		form.setFieldsValue({
			envs: nextKeys
		});
	};

	render() {
		const { getFieldDecorator, getFieldValue } = this.props.form;
		// const that = this;
		const { isUpdateModalShow, projectList, handleUpdateIndex } = this.props;
		let initFormValues = {};
		let envMessage = [];
		// 如果列表存在且用户点击修改按钮时，设置表单默认值
		if (projectList.length !== 0 && handleUpdateIndex !== -1) {
			// console.log(projectList[handleUpdateIndex]);
			const { name, basepath, desc, env } = projectList[handleUpdateIndex];
			initFormValues = { name, basepath, desc, env };
			if (env.length !== 0) {
				envMessage = env;
			}
			initFormValues.prd_host = projectList[handleUpdateIndex].prd_host;
			initFormValues.prd_protocol =
				projectList[handleUpdateIndex].protocol + "://";
		}

		getFieldDecorator("envs", { initialValue: envMessage });
		const envs = getFieldValue("envs");
		const formItems = envs.map((k, index) => {
			const secondIndex = "next" + index; // 为保证key的唯一性
			return (
				<aRow
					key={index}
					type="flex"
					justify="space-between"
					align={index === 0 ? "middle" : "top"}>
					<aCol span={10} offset={2}>
						<FormItem
							label={index === 0 ? <span>环境名称</span> : ""}
							required={false}
							key={index}>
							{getFieldDecorator(`envs-name-${index}`, {
								validateTrigger: ["onChange", "onBlur"],
								initialValue: envMessage.length !== 0 ? k.name : "",
								rules: [
									{
										required: false,
										whitespace: true,
										validator(rule, value, callback) {
											if (value) {
												if (value.length === 0) {
													callback("请输入环境域名");
												} else if (!/\S/.test(value)) {
													callback("请输入环境域名");
												} else if (/prd/.test(value)) {
													callback('环境域名不能是"prd"');
												} else {
													return callback();
												}
											} else {
												callback("请输入环境域名");
											}
										}
									}
								]
							})(
								<aInput
									placeholder="请输入环境名称"
									style={{ width: "90%", marginRight: 8 }}
								/>
							)}
						</FormItem>
					</aCol>
					<aCol span={10}>
						<FormItem
							label={index === 0 ? <span>环境域名</span> : ""}
							required={false}
							key={secondIndex}>
							{getFieldDecorator(`envs-domain-${index}`, {
								validateTrigger: ["onChange", "onBlur"],
								initialValue:
									envMessage.length !== 0 && k.domain
										? k.domain.split("//")[1]
										: "",
								rules: [
									{
										required: false,
										whitespace: true,
										message: "请输入环境域名",
										validator(rule, value, callback) {
											if (value) {
												if (value.length === 0) {
													callback("请输入环境域名");
												} else if (!/\S/.test(value)) {
													callback("请输入环境域名");
												} else {
													return callback();
												}
											} else {
												callback("请输入环境域名");
											}
										}
									}
								]
							})(
								<aInput
									placeholder="请输入环境域名"
									style={{ width: "90%", marginRight: 8 }}
									addonBefore={getFieldDecorator(`envs-protocol-${index}`, {
										initialValue:
											envMessage.length !== 0 && k.domain
												? k.domain.split("//")[0] + "//"
												: "http://",
										rules: [
											{
												required: true
											}
										]
									})(
										<Select>
											<Option value="http://">{"http://"}</Option>
											<Option value="https://">{"https://"}</Option>
										</Select>
									)}
								/>
							)}
						</FormItem>
					</aCol>
					<aCol span={2}>
						{/* 新增的项中，只有最后一项有删除按钮 */}
						{(envs.length > 0 && k._id) || envs.length == index + 1 ? (
							<aIcon
								class="dynamic-delete-button"
								type="minus-circle-o"
								onClick={() => {
									return this.remove(k._id ? k._id : k);
								}}
							/>
						) : null}
					</aCol>
				</aRow>
			);
		});
		return (
			<aModal
				title="修改项目"
				visible={isUpdateModalShow}
				onOk={this.handleOk}
				onCancel={this.handleCancel}>
				<Form>
					<FormItem {...formItemLayout} label="项目名称">
						{getFieldDecorator("name", {
							initialValue: initFormValues.name,
							rules: [
								{
									required: true,
									message: "请输入项目名称!"
								}
							]
						})(<aInput />)}
					</FormItem>

					<FormItem
						{...formItemLayout}
						label={
							<span>
								线上域名&nbsp;
								<aTooltip title="将根据配置的线上域名访问mock数据">
									<xIcon icon="question-circle-o" />
								</aTooltip>
							</span>
						}>
						{getFieldDecorator("prd_host", {
							initialValue: initFormValues.prd_host,
							rules: [
								{
									required: true,
									message: "请输入项目线上域名!"
								}
							]
						})(
							<aInput
								addonBefore={
									<Select
										defaultValue={initFormValues.prd_protocol}
										onChange={this.protocolChange}>
										<Option value="http://">{"http://"}</Option>
										<Option value="https://">{"https://"}</Option>
									</Select>
								}
							/>
						)}
					</FormItem>

					<FormItem
						{...formItemLayout}
						label={
							<span>
								基本路径&nbsp;
								<aTooltip title="基本路径为空表示根路径">
									<xIcon icon="question-circle-o" />
								</aTooltip>
							</span>
						}>
						{getFieldDecorator("basepath", {
							initialValue: initFormValues.basepath,
							rules: [
								{
									required: false,
									message: "请输入项目基本路径! "
								}
							]
						})(<aInput />)}
					</FormItem>

					<FormItem {...formItemLayout} label="描述">
						{getFieldDecorator("desc", {
							initialValue: initFormValues.desc,
							rules: [
								{
									required: false,
									message: "请输入描述!"
								}
							]
						})(<TextArea rows={4} />)}
					</FormItem>

					{formItems}
					<FormItem {...formItemLayoutWithOutLabel}>
						<aButton type="dashed" onClick={this.add} style={{ width: "60%" }}>
							<xIcon icon="plus" /> 添加环境配置
						</aButton>
					</FormItem>
				</Form>
			</aModal>
		);
	}
}

export default Form.create()(UpDateModal);
